<template>
  <div>
    <params v-model="form" />
    <div id="container"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import CreateThree from '@/three/base';
import EarthPoints from './material/EarthPoints';
import EarthBorder from './material/EarthBorder';
import ScanningLight from './material/ScanningLight';
import Satellite from './material/Satellite';
import Atmosphere from './material/Atmosphere';
// import StarPoints from "./material/StarPoints";
import Countrygdp from './material/Countrygdp';
import FlyLine from './material/FlyLine';
import params from './params.vue';

const form = ref({});
const scene = new CreateThree({
  camera: {
    fov: 45,
    near: 1,
    far: 200000,
    position: { x: -700, y: 1400, z: -2800 }
  },
  control: {
    enablePan: false,
    enableDamping: true
  }
});
const earthPoints = new EarthPoints();
const earthBorder = new EarthBorder();
const scanningLight = new ScanningLight();
const satellite = new Satellite();
const atmosphere = new Atmosphere(1200);
// const starPoints = new StarPoints();
const countrygdp = new Countrygdp();
const flyLine = new FlyLine();
const colors = [
  '#604bff',
  '#ff7a37',
  '#27c285',
  '#3485fb',
  '#f63854',
  '#faad14',
  '#91BFF8',
  '#0072FF',
  '#00FF40',
  '#ff0000',
  '#409EFF',
  '#67C23A',
  '#E6A23C',
  '#F56C6C',
  '#909399',
  '#82ffff',
  '#41b9d2'
];
watch(
  () => form.value,
  () => {
    if (form.value.satellite) {
      satellite.setConfig(form.value.satellite);
    }
  },
  { deep: true }
);

setTimeout(() => {
  const color = colors[Math.floor(Math.random() * colors.length)];
  earthPoints.setColor(color);
  scanningLight.setColor(color);
  earthBorder.setColor(color);
  satellite.setColor(color);
  flyLine.setColor(color);
  countrygdp.setColor(color);
}, 1000);

onMounted(() => {
  scene.bind('#container');
  scene.add(earthPoints.mesh);
  scene.add(earthBorder.mesh);
  scene.add(scanningLight.mesh);
  scene.add(satellite.mesh);
  scene.add(atmosphere.mesh);
  // scene.add(starPoints.mesh)
  scene.add(countrygdp.mesh);
  scene.add(flyLine.mesh);
  render();
});
function render() {
  requestAnimationFrame(render);
  scene.update();
  scanningLight.update();
  satellite.update();
  flyLine.update();
  countrygdp.update();
}
</script>
